<template>
  <div>
    <div class="container">
      <!-- 导航栏 -->
      <van-nav-bar
        title="设置"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="cell1">
        <van-cell
          title="账号资料"
          @click="$router.push(`/accountInfo`)"
          is-link
        />
        <van-cell
          title="账号与安全"
          @click="$router.push(`/accountSecur`)"
          is-link
        />
      </div>
      <div class="cell2">
        <van-cell center title="通知提醒">
          <template #right-icon>
            <van-switch v-model="checked" size="16" />
          </template>
        </van-cell>
      </div>
      <div class="cell3">
        <van-cell
          title="帮助中心"
          @click="$router.push(`/helpCenter`)"
          is-link
        />
        <van-cell title="关于我们" @click="$router.push(`/AboutUs`)" is-link />
        <van-cell title="清除缓存" value="10.24MB" is-link />
        <van-cell title="版本更新" value="内容" is-link />
      </div>
      <van-tabbar>
        <van-tabbar-item>退出登录</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script setup>
import '@/assets/css/reset.css'
import '@/assets/css/base.css'
import { onMounted, ref, reactive } from 'vue'
// 导航栏
const onClickLeft = () => history.back()
// 开关
const checked = ref(true)
</script>

<style lang="scss" scoped>
.container {
  background-color: var(--color-grey-three);
  --van-nav-bar-background: var(--color-primary);
  --van-nav-bar-text-color: var(--color-white);
  .van-cell__title {
    text-shadow: 0 0 0 #000;
  }
  .van-cell:after {
    border-bottom: 0;
  }
  .cell1 {
    padding: 15px 0;
  }
  .cell2 {
    --van-switch-width: calc(2.4em + 4px);
  }
  .cell3 {
    padding-top: 15px;
  }
}
</style>
